import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from "react-router-dom";
import {
    Layout, Menu, Icon, Dropdown, Row, Col, Card, Spin, List, Button, Tag, message, Popconfirm, Modal, Form,
    Input, Alert, Table, Divider, Upload, Select, Tooltip, Tabs, Switch as AntdSwitch, Calendar, Empty, Badge, TimePicker, DatePicker
} from "antd";
import { UrlPrefix, iconFontUrl, memberUploadTemplateUrl } from "../js/config.js";
import icon from "../img/icon.png";
import {
    listMenuByPermission, allUserApi
} from "../js/api.js";
import {
    getOriginalNameById, getAllOriginalListByClass, deleteOriginalListByIds, deleteOriginalName, insertOriginalName, updateOriginalName, insertOriginalList, importOriginalList
} from "../js/attendanceapi.js";
import {
    getBluetoothList, deleteBluetoothDevice, addBluetoothDevice, updateBluetoothDevice
} from "../js/attendanceapi.js";
import {
    getMeetingListByManager, deleteMeetingById, getStaticInfo, addMeeting, updateMeetingById, getMeetingInfoByType, getCheckCreateDate, getCheckCondition, getBluetoothDeviceByDepartment, saveAsNewGroup
} from "../js/attendanceapi.js";
import moment from 'moment';
import { baseUrl } from "../js/config.js"

const { Content, Footer, Sider, Header } = Layout;
const SubMenu = Menu.SubMenu;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: iconFontUrl,
});

class SchoolAttendance extends Component {
    constructor(props) {
        super(props);
        let url = document.location.href;
        let page = url.split("/")[5];
        let defaultSelectedKeys;
        let defaultOpenKeys;
        switch (page) {
            case "attendance":
                defaultOpenKeys = "";
                defaultSelectedKeys = "attendance"; break;
            case "originallist":
                defaultOpenKeys = "";
                defaultSelectedKeys = "originallist"; break;
            // case "signblueteeth":
            //     defaultOpenKeys = "";
            //     defaultSelectedKeys = "signblueteeth"; break;
            default:
                defaultOpenKeys = "";
                defaultSelectedKeys = "attendance";
        }
        this.state = {
            defaultSelectedKeys: [defaultSelectedKeys],
            defaultOpenKeys: [defaultOpenKeys],
            collapsed: false,
            menuData: []
        };
        // console.log(this.props.location.state);
        //console.log(sessionStorage.getItem("username"));
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        let departmentId = sessionStorage.getItem("departmentId");
        let identityId = sessionStorage.getItem("identityId");
        listMenuByPermission(departmentId, identityId)
            .then(res => {
                this.setState({
                    menuData: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    onCollapse = (collapsed) => {
        //console.log(collapsed);
        if (collapsed) {
            document.getElementById("logoName").style.display = "none";
        } else {
            document.getElementById("logoName").style.display = "inline";
        }
        this.setState({ collapsed });
    }

    logOff() {
        sessionStorage.setItem("username", null);
        sessionStorage.setItem("identityId", null);
        sessionStorage.setItem("departmentId", null);
        this.props.history.push("/");
    }

    render() {
        const menu = this.state.menuData.map(val => {
            const subMenu = val.subMenu.map(subVal => {
                return (
                    <Menu.Item key={subVal.key}>
                        <Link to={subVal.route}>
                            <IconFont type={subVal.icon} className='icon' />
                            <span className="nav-text">{subVal.name}</span>
                        </Link>
                    </Menu.Item>
                )
            });
            return (
                val.subMenu.length == 0 ?
                    (
                        <Menu.Item key={val.key}>
                            <Link to={val.route}>
                                <IconFont type={val.icon} className='icon' />
                                <span className="nav-text">{val.name}</span>
                            </Link>
                        </Menu.Item>
                    ) :
                    (
                        <SubMenu
                            key={val.key}
                            title={
                                <span>
                                    <IconFont type={val.icon} className='icon' />
                                    <span>{val.name}</span>
                                </span>
                            }>
                            {subMenu}
                        </SubMenu>
                    )
            );
        });
        return (
            <Router basename="/school/teacher">
                <Layout>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                        width={256}
                        style={{
                            overflow: "auto",
                            height: "100vh",
                            left: 0
                        }}>
                        <div className="logo" >
                            {/* <IconFont type="icon-anfang" className='icon' style={{ verticalAlign: "middle", }} /> */}
                            <img src={icon} className='icon' style={{
                                verticalAlign: 'middle',
                                width: '30px',
                                height: '30px',
                                marginRight: '5px'
                            }} />
                            <div
                                id='logoName'
                                style={{ verticalAlign: 'middle', display: 'inline-block', paddingLeft: "5px" }}>
                                梯度智慧安监
                            </div>
                        </div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={this.state.defaultSelectedKeys} defaultOpenKeys={this.state.defaultOpenKeys}>
                            {menu}
                        </Menu>
                    </Sider>
                    <Layout style={{ height: "100vh" }}>
                        <Header style={{
                            background: '#fcfcfc',
                            padding: 0,
                            fontFamily: 'Microsoft Yahei, sans-serif',
                            fontSize: 15,
                            position: 'relative',
                            height: '64px',
                            lineHeight: '64px',
                        }}>
                            <div style={{ position: "absolute", top: 0, bottom: 0, left: 24, }}>
                                欢迎您！您的身份为<span style={{ color: '#1890ff' }}>教师</span>
                            </div>
                            <div style={{ position: "absolute", top: 0, bottom: 0, right: 24, }}>
                                <Dropdown overlay={
                                    <Menu>
                                        <Menu.Item>
                                            <a
                                                class='logOff'
                                                style={{ color: '#333333', padding: '5px 15px' }}
                                                onClick={() => this.logOff()}>
                                                <IconFont
                                                    type="icon-zhuxiaologout11" className='icon'
                                                    style={{ fontSize: '14px', verticalAlign: 'middle' }} />
                                                <span style={{ verticalAlign: 'middle', marginLeft: '2px' }}>退出登录</span>
                                            </a>
                                        </Menu.Item>
                                    </Menu>
                                }>
                                    <div
                                        className='dropdown'
                                        style={{
                                            padding: '0px 5px'
                                        }}>
                                        <IconFont
                                            style={{ fontSize: '28px', verticalAlign: 'middle' }}
                                            type="icon-touxiang-shi" className='icon' />
                                        <span style={{ marginLeft: '2px' }}>{sessionStorage.getItem("username")}</span>
                                    </div>
                                </Dropdown>
                            </div>
                        </Header>
                        <Content style={{ margin: "24px", overflow: "initial" }}>
                            <Switch>
                                <Route path="/attendance" component={Attendance} />
                                <Route path="/originallist" component={OriginalList} />
                                {/* <Route path="/signblueteeth" component={SignBlueteeth} /> */}
                                <Redirect path="/" to={{ pathname: '/attendance' }} />
                            </Switch>
                            <div
                                style={{
                                    width: 'auto',
                                    height: 24,
                                    background: '#f0f2f5'
                                }}
                            ></div>
                        </Content>
                    </Layout>
                </Layout>
            </Router>
        );
    }
}

const { CheckableTag } = Tag;
const confirm = Modal.confirm;
class OriginalList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            groupDetailTitle: '分组详情',
            actionVisible: false,
            groupLoading: false,
            groupDetailLoading: false,
            groupData: [],
            groupDetailData: [],
            batchDeletionClick: false,
            btnChooseAllText: '全选',
            nowGroupId: 0,
            nowGroupName: '',
            nowGroupType: 0,
            modalTitle: '',
            modalVisibal: false,
            confirmLoading: false,
            alertVisible: false,
            msg: '',
            formType: '',
            uploading: false,
            fileList: []
        }
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            groupLoading: true
        });
        getOriginalNameById(sessionStorage.getItem("userId"), sessionStorage.getItem("departmentId"))
            .then(res => {
                this.setState({
                    groupData: res.data,
                    groupLoading: false,
                    actionVisible: false,
                    groupDetailTitle: '分组详情'
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    refreshDataForUpdateGroupName(groupName) {
        this.setState({
            groupLoading: true
        });
        getOriginalNameById(sessionStorage.getItem("userId"), sessionStorage.getItem("departmentId"))
            .then(res => {
                this.setState({
                    groupData: res.data,
                    groupLoading: false,
                    actionVisible: false,
                    groupDetailTitle: '分组详情'
                });
                this.handleGroupListItemClick(this.state.nowGroupId, groupName, this.state.nowGroupType)
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    handleGroupListItemClick = (groupId, groupName, groupType) => {
        this.setState({
            groupDetailLoading: true,
            nowGroupId: groupId,
            nowGroupName: groupName,
            nowGroupType: groupType
        });
        getAllOriginalListByClass(groupId)
            .then(res => {
                this.setState({
                    groupDetailLoading: false,
                    actionVisible: true,
                    groupDetailTitle: groupName + "分组详情",
                    groupDetailData: res.data,
                    batchDeletionClick: false
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    handleTagCheckedChange = (index) => {
        let groupDetailData = this.state.groupDetailData;
        groupDetailData[index].checked = !groupDetailData[index].checked
        this.setState({
            groupDetailData: groupDetailData
        });
    }

    handleBatchDeletionBtnClick = () => {
        let groupDetailData = this.state.groupDetailData.map(val => {
            val.checked = false;
            return val;
        });
        this.setState({
            groupDetailData: groupDetailData,
            batchDeletionClick: !this.state.batchDeletionClick,
            btnChooseAllText: '全选'
        });
    }

    handleChooseAll = () => {
        let groupDetailData = this.state.groupDetailData;
        if (this.state.btnChooseAllText == '全选') {
            groupDetailData.map(val => val.checked = true);
            this.setState({
                btnChooseAllText: '重置',
                groupDetailData: groupDetailData
            })
        } else {
            groupDetailData.map(val => val.checked = false);
            this.setState({
                btnChooseAllText: '全选',
                groupDetailData: groupDetailData
            })
        }
    }

    handleBatchDeletion = () => {
        let filter = this.state.groupDetailData.filter(v => v.checked === true);
        if (filter.length > 0) {
            deleteOriginalListByIds(this.state.groupDetailData)
                .then(res => {
                    if (res.data == "success") {
                        this.handleGroupListItemClick(this.state.nowGroupId, this.state.nowGroupName, this.state.nowGroupType);
                        message.success("删除成员成功！");
                    } else {
                        message.error("删除成员失败！");
                    }
                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message);
                    }
                    console.info(e.config)
                });
        } else {
            message.warning("请选择成员！")
        }
    }

    handleSaveAs = () => {
        let filter = this.state.groupDetailData.filter(v => v.checked === true);
        if (filter.length > 0) {
            this.handleClickOpenModal("saveAs");
        } else {
            message.warning("请选择成员！")
        }

    }

    handleDeleteGroup = () => {
        confirm({
            title: '确定删除分组？',
            onOk: () => {
                deleteOriginalName(this.state.nowGroupId)
                    .then(res => {
                        if (res.data == "success") {
                            this.refreshData();
                            message.success("删除分组成功！");
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message);
                        }
                        console.info(e.config)
                    });
            },
            onCancel: () => {
                console.log('Cancel');
            },
        });
    }

    // 关闭模态框
    handleCancel = () => {
        let val = this.refs.formValue;
        val.resetFields();
        this.setState({
            alertVisible: false,
            modalVisibal: false
        });
    }

    // 关闭模态框中提示框
    handleClose = () => {
        this.setState({
            alertVisible: false
        });
    }

    handleClickSubmit = (type) => {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.formValue;
        val.validateFields((err, values) => {
            if (!err) {
                switch (type) {
                    case "addGroup": {
                        insertOriginalName(sessionStorage.getItem("userId"), values.groupName, 0, values.type)
                            .then(res => {
                                if (res.data == "EXISTS") {
                                    this.setState({
                                        msg: "分组名称已存在！请重新输入",
                                        alertVisible: true
                                    });
                                } else {
                                    message.success("新增分组成功！");
                                    this.handleCancel();
                                    this.refreshData();
                                }
                                this.setState({
                                    confirmLoading: false
                                });
                            })
                            .catch((e) => {
                                if (e.response) {
                                    //请求已发出，服务器返回状态码不是2xx。
                                    console.info(e.response.data)
                                    console.info(e.response.status)
                                    console.info(e.response.headers)
                                } else if (e.request) {
                                    // 请求已发出，但没有收到响应
                                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                                    // 在node中是一个http.ClientRequest实例
                                    console.info(e.request)
                                } else {
                                    //发送请求时异常，捕捉到错误
                                    console.info('error', e.message);
                                }
                                console.info(e.config)
                            });
                        break;
                    }
                    case "addGroupMember": {
                        insertOriginalList(values.member, values.account, this.state.nowGroupId)
                            .then(res => {
                                if (res.data == "success") {
                                    message.success("新增成员成功！");
                                    this.handleCancel();
                                    this.handleGroupListItemClick(this.state.nowGroupId, this.state.nowGroupName, this.state.nowGroupType);
                                } else {
                                    this.setState({
                                        msg: "新增成员失败！请检查表单信息",
                                        alertVisible: true
                                    });
                                }
                                this.setState({
                                    confirmLoading: false
                                });
                            })
                            .catch((e) => {
                                if (e.response) {
                                    //请求已发出，服务器返回状态码不是2xx。
                                    console.info(e.response.data)
                                    console.info(e.response.status)
                                    console.info(e.response.headers)
                                } else if (e.request) {
                                    // 请求已发出，但没有收到响应
                                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                                    // 在node中是一个http.ClientRequest实例
                                    console.info(e.request)
                                } else {
                                    //发送请求时异常，捕捉到错误
                                    console.info('error', e.message);
                                }
                                console.info(e.config)
                            });
                        break;
                    }
                    case "changeGroupName": {
                        updateOriginalName(sessionStorage.getItem("userId"), values.groupName, this.state.nowGroupId)
                            .then(res => {
                                if (res.data == "EXISTS") {
                                    this.setState({
                                        msg: "分组名称已存在！请重新输入",
                                        alertVisible: true
                                    });
                                } else {
                                    message.success("修改分组名称成功！");
                                    this.handleCancel();
                                    this.refreshDataForUpdateGroupName(values.groupName)
                                }
                                this.setState({
                                    confirmLoading: false
                                });
                            })
                            .catch((e) => {
                                if (e.response) {
                                    //请求已发出，服务器返回状态码不是2xx。
                                    console.info(e.response.data)
                                    console.info(e.response.status)
                                    console.info(e.response.headers)
                                } else if (e.request) {
                                    // 请求已发出，但没有收到响应
                                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                                    // 在node中是一个http.ClientRequest实例
                                    console.info(e.request)
                                } else {
                                    //发送请求时异常，捕捉到错误
                                    console.info('error', e.message);
                                }
                                console.info(e.config)
                            });
                        break;
                    }
                    case "saveAs": {
                        let filter = this.state.groupDetailData.filter(v => v.checked === true).map(val => val.id);
                        saveAsNewGroup(sessionStorage.getItem("userId"), 0, values.groupName, filter, this.state.nowGroupType)
                            .then(res => {
                                if (res.data == "EXISTS") {
                                    this.setState({
                                        msg: "分组名称已存在！请重新输入",
                                        alertVisible: true
                                    });
                                } else {
                                    message.success("新增分组成功！");
                                    this.handleCancel();
                                    this.refreshData();
                                }
                                this.setState({
                                    confirmLoading: false
                                });
                            })
                            .catch((e) => {
                                if (e.response) {
                                    //请求已发出，服务器返回状态码不是2xx。
                                    console.info(e.response.data)
                                    console.info(e.response.status)
                                    console.info(e.response.headers)
                                } else if (e.request) {
                                    // 请求已发出，但没有收到响应
                                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                                    // 在node中是一个http.ClientRequest实例
                                    console.info(e.request)
                                } else {
                                    //发送请求时异常，捕捉到错误
                                    console.info('error', e.message);
                                }
                                console.info(e.config)
                            });
                    }
                }
            }
        })
    }

    handleClickOpenModal = (type) => {
        switch (type) {
            case "addGroup": {
                this.setState({
                    modalTitle: "新增分组"
                });
                break;
            }
            case "addGroupMember": {
                this.setState({
                    modalTitle: "新增成员"
                });
                break;
            }
            case "changeGroupName": {
                this.setState({
                    modalTitle: "修改分组名称"
                });
                break;
            }
            case "saveAs": {
                this.setState({
                    modalTitle: "另存为新分组"
                });
                break;
            }
        }
        this.setState({
            formType: type,
            modalVisibal: true
        })
    }

    handleClickUpload = () => {
        const { fileList } = this.state;
        const formData = new FormData();
        fileList.forEach((file) => {
            formData.append('upfile', file);
        });
        this.setState({
            uploading: true,
        });

        // You can use any AJAX library you like
        importOriginalList(formData, this.state.nowGroupId)
            .then(res => {
                if (res.data === "success") {
                    this.handleGroupListItemClick(this.state.nowGroupId, this.state.nowGroupName, this.state.nowGroupType);
                    message.success("上传成功！");
                } else {
                    message.error(res.data);
                }
                this.setState({
                    uploading: false,
                    fileList: []
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    render() {
        const menu = (
            <Menu>
                <Menu.Item key="0">
                    操作
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key="1" onClick={() => this.handleClickOpenModal("changeGroupName")}>
                    重命名
                </Menu.Item>
                <Menu.Item key="2" onClick={() => this.handleDeleteGroup()}>
                    删除分组
                </Menu.Item>
            </Menu>
        );

        const { uploading, fileList } = this.state;
        const props = {
            onRemove: (file) => {
                this.setState((state) => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: (file) => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
            fileList,
        };
        const huiyi = <Tag color="cyan">会议</Tag>
        const shangke = <Tag color="blue">上课</Tag>

        return (
            <div
                id="right"
                style={{
                    padding: 24,
                    background: "#fff",
                    height: "auto",
                    marginBottom: 24
                }}
            >
                <Row gutter={16}>
                    <Col span={6}>
                        <Spin spinning={this.state.groupLoading}>
                            <Card
                                title="已有分组"
                                extra={
                                    <a onClick={() => this.handleClickOpenModal("addGroup")}>
                                        <IconFont
                                            style={{
                                                fontSize: '18px',
                                                verticalAlign: 'middle'
                                            }}
                                            type="icon-icon02"
                                            className='icon' />
                                        <span style={{
                                            marginLeft: '5px',
                                            verticalAlign: 'middle'
                                        }}>
                                            新增分组
                                        </span>
                                    </a>
                                }>
                                <List
                                    size="small"
                                    bordered
                                    dataSource={this.state.groupData}
                                    renderItem={(item, index) => (
                                        <List.Item
                                            className='group-list-item'
                                            onClick={() => this.handleGroupListItemClick(item.id, item.name, item.type)}>
                                            {item.type == 1 ? huiyi : shangke}{index + 1}. {item.name}
                                        </List.Item>
                                    )}
                                />
                            </Card>
                        </Spin>
                    </Col>
                    <Col span={18}>
                        <Spin spinning={this.state.groupDetailLoading}>
                            <Card
                                title={this.state.groupDetailTitle}
                                extra={
                                    <div style={
                                        this.state.actionVisible ?
                                            {
                                                visibility: 'visible'
                                            } :
                                            {
                                                visibility: 'hidden'
                                            }
                                    }>
                                        <Dropdown
                                            overlay={menu}
                                            trigger={['click']}>
                                            <a>
                                                <IconFont
                                                    style={{
                                                        fontSize: '18px',
                                                        verticalAlign: 'middle'
                                                    }}
                                                    type="icon-xiala"
                                                    className='icon' />
                                                <span style={{
                                                    marginLeft: '5px',
                                                    verticalAlign: 'middle'
                                                }}>
                                                    更多操作
                                                </span>
                                            </a>
                                        </Dropdown>
                                    </div>
                                }>
                                {
                                    !this.state.actionVisible ?
                                        (
                                            <Row
                                                type="flex"
                                                justify="center"
                                                align="middle">
                                                <Col
                                                    style={{
                                                        textAlign: 'center'
                                                    }}
                                                    span={24}>
                                                    <IconFont
                                                        style={{
                                                            fontSize: '36px'
                                                        }}
                                                        type="icon-jinggaotixing"
                                                        className='icon' />
                                                    <span style={{
                                                        fontSize: '36px',
                                                        marginLeft: '5px'
                                                    }}>
                                                        请选择一个分组！
                                                    </span>
                                                </Col>
                                            </Row>
                                        ) :
                                        (
                                            <Row>
                                                {
                                                    this.state.groupDetailData.length == 0 ?
                                                        (
                                                            <Row>
                                                                <Button
                                                                    type="primary"
                                                                    onClick={() => this.handleClickOpenModal("addGroupMember")}>
                                                                    新增成员
                                                                </Button>
                                                                <Button
                                                                    style={{ marginLeft: '10px' }}
                                                                    href={memberUploadTemplateUrl}>
                                                                    <Icon type="download" />下载模板
                                                                </Button>
                                                                {
                                                                    this.state.fileList.length === 0 ?
                                                                        (
                                                                            null
                                                                        ) :
                                                                        (
                                                                            <Button style={{ marginLeft: '10px' }}
                                                                                onClick={() => { this.handleClickUpload() }}
                                                                                loading={uploading}>
                                                                                导入
                                                                            </Button>
                                                                        )
                                                                }
                                                                <Upload {...props}>
                                                                    {
                                                                        this.state.fileList.length === 0 ?
                                                                            (
                                                                                <Button style={{ marginLeft: '10px' }}>
                                                                                    <Icon type="upload" />选择文件
                                                                                </Button>
                                                                            ) :
                                                                            (
                                                                                null
                                                                            )
                                                                    }
                                                                </Upload>
                                                            </Row>
                                                        ) :
                                                        (
                                                            <Row>
                                                                <Row style={{ marginBottom: '10px' }}>
                                                                    <Button type="primary" onClick={() => this.handleClickOpenModal("addGroupMember")}>新增成员</Button>
                                                                    <Button
                                                                        style={{
                                                                            marginLeft: '10px',
                                                                            color: '#fff',
                                                                            backgroundColor: '#ff4d4f',
                                                                            borderColor: '#ff4d4f'
                                                                        }}
                                                                        onClick={() => this.handleBatchDeletionBtnClick()}>
                                                                        {
                                                                            this.state.batchDeletionClick ?
                                                                                (
                                                                                    '取消选择'
                                                                                ) :
                                                                                (
                                                                                    '批量选择'
                                                                                )
                                                                        }
                                                                    </Button>
                                                                    {
                                                                        this.state.batchDeletionClick ?
                                                                            (
                                                                                <span>
                                                                                    <Button
                                                                                        style={{ marginLeft: '10px' }}
                                                                                        size='small'
                                                                                        onClick={() => { this.handleChooseAll() }}>
                                                                                        {this.state.btnChooseAllText}
                                                                                    </Button>
                                                                                    <Button
                                                                                        style={{ marginLeft: '10px' }}
                                                                                        size='small'
                                                                                        type="primary"
                                                                                        onClick={() => this.handleSaveAs()}>另存为新分组</Button>
                                                                                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消"
                                                                                        onConfirm={() => this.handleBatchDeletion()}>
                                                                                        <Button
                                                                                            style={{ marginLeft: '10px' }}
                                                                                            size='small'
                                                                                            type="primary">删除</Button>
                                                                                    </Popconfirm>
                                                                                </span>
                                                                            ) :
                                                                            (
                                                                                null
                                                                            )
                                                                    }
                                                                </Row>
                                                            </Row>
                                                        )
                                                }
                                                {
                                                    this.state.groupDetailData.length == 0 ?
                                                        (
                                                            <Row
                                                                type="flex"
                                                                justify="center"
                                                                align="middle">
                                                                <Col
                                                                    style={{
                                                                        textAlign: 'center'
                                                                    }}
                                                                    span={24}>
                                                                    <IconFont
                                                                        style={{
                                                                            fontSize: '36px'
                                                                        }}
                                                                        type="icon-jinggaotixing"
                                                                        className='icon' />
                                                                    <span style={{
                                                                        fontSize: '36px',
                                                                        marginLeft: '5px'
                                                                    }}>
                                                                        暂无数据，请添加成员！
                                                                    </span>
                                                                </Col>
                                                            </Row>
                                                        ) :
                                                        (
                                                            <Row style={{
                                                                backgroundColor: '#e6f7ff',
                                                                padding: '16px 16px 0 16px'
                                                            }}>
                                                                <List
                                                                    grid={{
                                                                        gutter: 16,
                                                                        column: 6
                                                                    }}
                                                                    dataSource={this.state.groupDetailData}
                                                                    renderItem={(item, index) => (
                                                                        <List.Item>
                                                                            {
                                                                                this.state.batchDeletionClick ?
                                                                                    (
                                                                                        <CheckableTag
                                                                                            style={{
                                                                                                border: '1px solid rgb(16, 142, 233)'
                                                                                            }}
                                                                                            className='my-tag'
                                                                                            {...this.props}
                                                                                            checked={item.checked}
                                                                                            onChange={() => this.handleTagCheckedChange(index)}>
                                                                                            {item.name}
                                                                                        </CheckableTag>
                                                                                    ) :
                                                                                    (
                                                                                        <Tag
                                                                                            color="#108ee9"
                                                                                            className='my-tag'>
                                                                                            {item.name}
                                                                                        </Tag>
                                                                                    )
                                                                            }
                                                                        </List.Item>
                                                                    )}
                                                                />
                                                            </Row>
                                                        )
                                                }
                                            </Row>
                                        )
                                }
                            </Card>
                        </Spin>
                    </Col>
                </Row>
                <Modal
                    title={this.state.modalTitle}
                    width={1000}
                    visible={this.state.modalVisibal}
                    onCancel={() => { this.handleCancel() }}
                    closable
                    footer={[
                        <Button key="submit" type="primary" size="large"
                            loading={this.state.confirmLoading}
                            onClick={() => { this.handleClickSubmit(this.state.formType) }}>提交</Button>
                    ]}
                >
                    <OriginalListForm ref="formValue"
                        formType={this.state.formType} groupType={this.state.nowGroupType} />
                    {
                        this.state.alertVisible ?
                            (
                                <Row>
                                    <Col offset={5} span={14}>
                                        <Alert message={this.state.msg} type="error" closable afterClose={() => { this.handleClose() }} />
                                    </Col>
                                </Row>
                            ) : null
                    }
                </Modal>
            </div>
        )
    }
}

const FormItem = Form.Item
class originalListForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            formType: props.formType,
            groupType: props.groupType
        }
    }

    componentWillReceiveProps(props) {
        this.setState({
            formType: props.formType,
            groupType: props.groupType
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 },
        };
        switch (this.state.formType) {
            case "saveAs": {
                return (
                    <Form>
                        <FormItem
                            label='分组名称'
                            {...formItemLayout}>
                            {getFieldDecorator("groupName", {
                                initialValue: "",
                                rules: [{
                                    required: true,
                                    message: "请输入新增分组名称!"
                                }]
                            })(
                                <Input
                                    size="large"
                                    prefix={
                                        <IconFont type="icon-mingcheng" style={{ color: "rgba(0,0,0,.25)" }} />
                                    }
                                    placeholder="分组名称"
                                    allowClear
                                />
                            )}
                        </FormItem>
                    </Form>
                );
            }
            case "addGroup": {
                return (
                    <Form>
                        <FormItem
                            label='分组名称'
                            {...formItemLayout}>
                            {getFieldDecorator("groupName", {
                                initialValue: "",
                                rules: [{
                                    required: true,
                                    message: "请输入新增分组名称!"
                                }]
                            })(
                                <Input
                                    size="large"
                                    prefix={
                                        <IconFont type="icon-mingcheng" style={{ color: "rgba(0,0,0,.25)" }} />
                                    }
                                    placeholder="分组名称"
                                    allowClear
                                />
                            )}
                        </FormItem>
                        <FormItem
                            label='分组类型'
                            {...formItemLayout}>
                            {getFieldDecorator("type", {
                                rules: [{
                                    required: true,
                                    message: "请选择新增分组类型!"
                                }]
                            })(
                                <Select size="large" placeholder="分组类型">
                                    <Option value={0}>有学号</Option>
                                    <Option value={1}>无学号</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Form>
                );
            }
            case "addGroupMember": {
                return (
                    <Form>
                        {
                            this.state.groupType === 0 ?
                                (
                                    <FormItem
                                        label='学号'
                                        {...formItemLayout}>
                                        {getFieldDecorator("account", {
                                            initialValue: "",
                                            rules: [{
                                                required: true,
                                                message: "请输入成员学号！"
                                            }]
                                        })(
                                            <Input
                                                size="large"
                                                prefix={
                                                    <IconFont type="icon-team" style={{ color: "rgba(0,0,0,.25)" }} />
                                                }
                                                placeholder="请输入成员学号！"
                                                allowClear
                                            />
                                        )}
                                    </FormItem>
                                ) :
                                (
                                    null
                                )
                        }
                        <FormItem
                            label='成员姓名'
                            {...formItemLayout}>
                            {getFieldDecorator("member", {
                                initialValue: "",
                                rules: [{
                                    required: true,
                                    message: "请输入成员姓名！"
                                }]
                            })(
                                <Input
                                    size="large"
                                    prefix={
                                        <IconFont type="icon-team" style={{ color: "rgba(0,0,0,.25)" }} />
                                    }
                                    placeholder="请输入成员姓名！"
                                    allowClear
                                />
                            )}
                        </FormItem>
                    </Form>
                );
            }
            case "changeGroupName": {
                return (
                    <Form>
                        <FormItem
                            label='分组名称'
                            {...formItemLayout}>
                            {getFieldDecorator("groupName", {
                                initialValue: "",
                                rules: [{
                                    required: true,
                                    message: "请输入新分组名称!"
                                }]
                            })(
                                <Input
                                    size="large"
                                    prefix={
                                        <IconFont type="icon-mingcheng" style={{ color: "rgba(0,0,0,.25)" }} />
                                    }
                                    placeholder="新分组名称"
                                    allowClear
                                />
                            )}
                        </FormItem>
                    </Form>
                );
            }
        }
    }
}
const OriginalListForm = Form.create()(originalListForm);

class Attendance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableData: [],
            tableLoading: false,
            modalTitle: "",
            modalVisible: false,
            confirmLoading: false,
            clickedRecord: {},
            alertVisible: false,
            msg: "",
            modalType: "",
            attendanceType: 0,
            qrCodeModalVisible: false,
            qrCodeContent: "",
            meetingCount: 0,
            groupCount: 0,
            blueToothCount: 0,
            groupOption: [],
            deviceOption: [],
            warningText: "",
            signInConditionData: [],
            signInCheckedData: []
        }
    }

    componentDidMount() {
        this.refreshData();
        this.getGroupOption();
        this.getDeviceOption();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        getMeetingListByManager(sessionStorage.getItem("userId"))
            .then(res => {
                this.setState({
                    tableData: res.data,
                    tableLoading: false
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
        getStaticInfo(sessionStorage.getItem("userId"))
            .then(res => {
                this.setState({
                    meetingCount: res.data.meetingCount,
                    groupCount: res.data.groupCount,
                    blueToothCount: res.data.blueToothCount,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
        getMeetingInfoByType(sessionStorage.getItem("userId"))
            .then(res => {
                this.setState({
                    signInConditionData: res.data,
                    signInCheckedData: res.data[0].data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    getGroupOption = () => {
        getOriginalNameById(sessionStorage.getItem("userId"), sessionStorage.getItem("departmentId"))
            .then(res => {
                this.setState({
                    groupOption: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    getDeviceOption = () => {
        getBluetoothList(sessionStorage.getItem("userId"))
            .then(res => {
                this.setState({
                    deviceOption: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    handleClickOpenModal = (type, record) => {
        if (type === "add") {
            this.setState({
                modalTitle: "新增签到项目",
                modalVisible: true,
                alertVisible: false,
                modalType: "add",
                clickedRecord: {},
                attendanceType: 0,
                warningText: "每个签到项目每人每天只可签到一次。如有需要，请配置多个签到项目！"
            });
        }
        if (type === "update") {
            this.setState({
                modalTitle: "编辑签到项目",
                modalVisible: true,
                alertVisible: false,
                modalType: "update",
                clickedRecord: record,
                attendanceType: -1,
                warningText: "编辑签到项目会使二维码内容发生变化，提交成功后请更换正在使用的二维码！"
            });
        }
    }

    handleCancel = () => {
        if (this.state.attendanceType !== 0) {
            let val = this.refs.formValue;
            val.resetFields();
        }
        this.setState({
            alertVisible: false,
            modalVisible: false
        });
    }

    handleFormSubmit = () => {
        let val = this.refs.formValue;
        val.validateFields((err, values) => {
            if (!err) {
                this.setState({
                    confirmLoading: true
                });
                if (this.state.modalType === "add") {
                    addMeeting(sessionStorage.getItem("userId"), this.state.attendanceType, values)
                        .then(res => {
                            if (res.data === "success") {
                                this.refreshData();
                                message.success("操作成功！")
                            } else {
                                message.error("操作失败！")
                            }
                            this.setState({
                                confirmLoading: false
                            });
                            this.handleCancel();
                        })
                        .catch((e) => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data)
                                console.info(e.response.status)
                                console.info(e.response.headers)
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request)
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info('error', e.message);
                            }
                            console.info(e.config)
                        });

                } else {
                    updateMeetingById(this.state.clickedRecord.id, sessionStorage.getItem("userId"), values)
                        .then(res => {
                            if (res.data === "success") {
                                this.refreshData();
                                message.success("操作成功！")
                            } else {
                                message.error("操作失败！")
                            }
                            this.setState({
                                confirmLoading: false
                            });
                            this.handleCancel();
                        })
                        .catch((e) => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data)
                                console.info(e.response.status)
                                console.info(e.response.headers)
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request)
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info('error', e.message);
                            }
                            console.info(e.config)
                        });
                }
            }
        })
    }

    handleClose = () => {
        this.setState({
            alertVisible: false
        });
    }

    handleAttendanceTypeClick = (attendanceType) => {
        this.setState({
            attendanceType: attendanceType
        });
        if (attendanceType === 1) {
            this.setState({
                modalTitle: "新增上课签到项目"
            });
        } else {
            this.setState({
                modalTitle: "新增会议签到项目"
            });
        }
    }

    handleQrCodeModalOpen = (text) => {
        this.setState({
            qrCodeModalVisible: true,
            qrCodeContent: text
        });
    }

    handleQrCodeModalClose = () => {
        this.setState({
            qrCodeModalVisible: false
        });
    }

    handleQrCodeDownload = (record) => {
        let canvasImg = document.getElementById('qrcode' + record.id);
        let alink = document.createElement("a");
        alink.href = canvasImg.toDataURL("image/png");
        alink.download = "二维码.png";
        alink.click();
    }

    handleClickDelete = (id) => {
        deleteMeetingById(id)
            .then(res => {
                if (res.data === "success") {
                    message.success("删除成功！");
                    this.refreshData();
                } else {
                    message.error("删除失败！");
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    switchOnChangeHandle = (checked) => {
        if (checked) {
            this.setState({
                signInCheckedData: this.state.signInConditionData[0].data
            });
        } else {
            this.setState({
                signInCheckedData: this.state.signInConditionData[1].data
            });
        }
    }

    render() {
        const columns = [{
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: (text, record, index) => `${index + 1}`,
        }, {
            title: '签到名称',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '签到类型',
            dataIndex: 'type',
            key: 'type',
            render: (text) => {
                if (text === 1 || text === 3) {
                    return (
                        <Tag color="green">上课</Tag>
                    );
                } else {
                    return (
                        <Tag color="blue">会议</Tag>
                    );
                }
            }
        }, {
            title: '签到对象',
            dataIndex: 'groupName',
            key: 'groupName',
        }, {
            title: '签到设备号',
            key: 'blueToothMinorList',
            dataIndex: 'blueToothMinorList',
            render: (text) => {
                let tags = text.split(',').map(v => {
                    return (
                        <Tag color="#2db7f5">{v}</Tag>
                    );
                })
                return tags;
            }
        }, {
            title: '签到时间',
            key: 'dateTime',
            dataIndex: 'dateTime',
            render: (text, record) => {
                if (record.startDate != null && record.startTime != null) {
                    return record.startDate + " " + record.startTime;
                } else {
                    return "未设置";
                }
            }
        }, {
            title: '二维码',
            dataIndex: 'qrCodeString',
            render: (text, record) => (
                <span>
                    <a onClick={() => this.handleQrCodeModalOpen(text)}>查看</a>
                    <Divider type="vertical" />
                    <a onClick={() => this.handleQrCodeDownload(record)}>下载</a>
                    <QRCode
                        id={"qrcode" + record.id}
                        value={text}
                        size={600}
                        style={{ display: "none" }} />
                </span>
            )
        }, {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <span>
                    <a onClick={() => this.handleClickOpenModal("update", record)}>编辑</a>
                    <Divider type="vertical" />
                    <a href={baseUrl + "report/export?id=" + record.id}>导出签到结果</a>
                    <Divider type="vertical" />
                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消"
                        onConfirm={() => this.handleClickDelete(record.id)}>
                        <a href="#">删除</a>
                    </Popconfirm>
                </span>
            )
        }];
        let QRCode = require('qrcode.react');
        return (
            <div
                id="right"
            >
                <Row gutter={16}>
                    <Col span={8}>
                        <Card
                            style={{
                                backgroundColor: "#D4BAB0"
                            }}
                            bordered={false}
                            hoverable>
                            <Row
                                style={{ height: 112 }}
                                type="flex"
                                justify="space-around"
                                align="middle">
                                <Col>
                                    <IconFont
                                        className="attendance-icon"
                                        type="icon-qiandao1"
                                    />
                                </Col>
                                <Col>
                                    <Row style={{
                                        fontSize: "20px",
                                        fontWeight: "bold",
                                        color: "#000"
                                    }}>
                                        已配置签到场次
                                    </Row>
                                    <Row style={{
                                        fontSize: "30px",
                                        fontWeight: "bold",
                                        textAlign: "right",
                                    }}>
                                        {this.state.meetingCount}
                                    </Row>
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card
                            style={{
                                backgroundColor: "#C7C7BB"
                            }}
                            bordered={false}
                            hoverable>
                            <Row
                                style={{ height: 112 }}
                                type="flex"
                                justify="space-around"
                                align="middle">
                                <Col>
                                    <IconFont
                                        className="attendance-icon"
                                        type="icon-shebei1"
                                    />
                                </Col>
                                <Col>
                                    <Row style={{
                                        fontSize: "20px",
                                        fontWeight: "bold",
                                        color: "#000"
                                    }}>
                                        已配置签到设备数
                                    </Row>
                                    <Row style={{
                                        fontSize: "30px",
                                        fontWeight: "bold",
                                        textAlign: "right",
                                    }}>
                                        {this.state.blueToothCount}
                                    </Row>
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card
                            style={{
                                backgroundColor: "#C1ABAD"
                            }}
                            bordered={false}
                            hoverable>
                            <Row
                                style={{ height: 112 }}
                                type="flex"
                                justify="space-around"
                                align="middle">
                                <Col>
                                    <IconFont
                                        className="attendance-icon"
                                        type="icon-renyuanguanli"
                                    />
                                </Col>
                                <Col>
                                    <Row style={{
                                        fontSize: "20px",
                                        fontWeight: "bold",
                                        color: "#000"
                                    }}>
                                        已配置分组数
                                    </Row>
                                    <Row style={{
                                        fontSize: "30px",
                                        fontWeight: "bold",
                                        textAlign: "right",
                                    }}>
                                        {this.state.groupCount}
                                    </Row>
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                </Row>
                <Row
                    gutter={16}
                    style={{
                        margin: '24px 0 0 0',
                        background: "#fff",
                        height: "auto"
                    }}>
                    <Col span={24}>
                        <Card
                            title="已配置签到"
                            bordered={false}
                            extra={
                                <a onClick={() => this.handleClickOpenModal("add")}>
                                    <IconFont
                                        style={{
                                            fontSize: '18px',
                                            verticalAlign: 'middle'
                                        }}
                                        type="icon-icon02"
                                        className='icon' />
                                    <span style={{
                                        marginLeft: '5px',
                                        verticalAlign: 'middle'
                                    }}>
                                        新增签到
                                    </span>
                                </a>
                            }>
                            <Table
                                dataSource={this.state.tableData}
                                columns={columns}
                                loading={this.state.tableLoading}
                                locale={{ emptyText: '暂无数据' }}
                                rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                                pagination={{  //分页
                                    total: this.state.tableData.length, //数据总数量
                                    defaultPageSize: 10, //默认显示几条一页
                                    pageSize: 10,
                                    showTotal: function (total) {  //设置显示一共几条数据
                                        return '共 ' + total + ' 条数据';
                                    }
                                }} />
                        </Card>
                    </Col>
                </Row>
                {
                    this.state.signInConditionData.length !== 0 ?
                        (
                            <Row
                                gutter={16}
                                style={{
                                    margin: '24px 0 0 0',
                                    background: "#fff",
                                    height: "auto"
                                }}
                            >
                                <Col span={24}>
                                    <Card
                                        title={(
                                            <Row type="flex" justify="space-between" align="middle">
                                                <Col>
                                                    <span>签到情况</span>
                                                </Col>{}
                                                <Col>
                                                    {
                                                        this.state.signInConditionData.length === 2 ?
                                                            (
                                                                <AntdSwitch
                                                                    checkedChildren="上课"
                                                                    unCheckedChildren="会议"
                                                                    defaultChecked={this.state.signInConditionData[0].type === 1}
                                                                    onChange={(checked) => this.switchOnChangeHandle(checked)} />
                                                            ) :
                                                            (
                                                                null
                                                            )
                                                    }
                                                </Col>
                                            </Row>
                                        )}
                                        bordered={false}
                                    >
                                        {
                                            this.state.signInCheckedData.length === 0 ?
                                                (
                                                    <Empty />
                                                ) :
                                                (
                                                    <SignInCondition userId={sessionStorage.getItem("userId")} data={this.state.signInCheckedData}></SignInCondition>
                                                )
                                        }
                                    </Card>
                                </Col>
                            </Row>
                        ) :
                        (
                            null
                        )
                }

                <Modal
                    title="查看二维码"
                    visible={this.state.qrCodeModalVisible}
                    width={1000}
                    onCancel={() => this.handleQrCodeModalClose()}
                    closable
                    footer={null}>
                    <Row
                        type="flex" justify="space-around" align="middle"
                        style={{
                            height: "450px"
                        }}
                    >
                        <Col>
                            <QRCode value={this.state.qrCodeContent} size={300} />
                        </Col>
                    </Row>
                </Modal>
                <Modal
                    title={this.state.modalTitle}
                    destroyOnClose={true}
                    visible={this.state.modalVisible}
                    width={1000}
                    onCancel={() => this.handleCancel()}
                    closable
                    footer={
                        this.state.attendanceType !== 0 ?
                            (
                                [
                                    <Button key="submit" type="primary" size="large"
                                        loading={this.state.confirmLoading}
                                        onClick={() => this.handleFormSubmit()}>
                                        提交
                                    </Button>
                                ]
                            ) :
                            (
                                null
                            )
                    }
                >
                    {
                        this.state.attendanceType === 0 ?
                            (
                                <Row
                                    type="flex" justify="space-around" align="middle"
                                    style={{
                                        height: "450px"
                                    }}
                                >
                                    <Col className="attendance-type-btn" onClick={() => this.handleAttendanceTypeClick(1)}>
                                        <div style={{ width: "100%", textAlign: "center" }}>
                                            <IconFont
                                                type="icon-shangkedianming"
                                                style={{
                                                    fontSize: "80px"
                                                }}
                                            />
                                            <div style={{
                                                marginTop: "5px",
                                                fontSize: "16px",
                                                fontWeight: "bold",
                                                color: "#000"
                                            }}>
                                                上课签到
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="attendance-type-btn" onClick={() => this.handleAttendanceTypeClick(2)}>
                                        <div style={{ width: "100%", textAlign: "center" }}>
                                            <IconFont
                                                type="icon-huiyi"
                                                style={{
                                                    fontSize: "80px"
                                                }}
                                            />
                                            <div style={{
                                                marginTop: "5px",
                                                fontSize: "16px",
                                                fontWeight: "bold",
                                                color: "#000"
                                            }}
                                            >
                                                会议签到
                                            </div>
                                        </div>
                                    </Col>
                                </Row>
                            ) :
                            (
                                <Row>
                                    <Row style={{ marginBottom: "20px" }}>
                                        <Col offset={5} span={14}>
                                            <Alert
                                                message={this.state.warningText}
                                                type="warning"
                                            />
                                        </Col>
                                    </Row>
                                    <AttendanceForm ref="formValue" record={this.state.clickedRecord} modalType={this.state.modalType}
                                        groupOption={this.state.groupOption} deviceOption={this.state.deviceOption} type={this.state.attendanceType} />
                                    {
                                        this.state.alertVisible ?
                                            (
                                                <Row>
                                                    <Col offset={5} span={14}>
                                                        <Alert message={this.state.msg} type="error" closable afterClose={() => { this.handleClose() }} />
                                                    </Col>
                                                </Row>
                                            ) : null
                                    }
                                </Row>

                            )
                    }

                </Modal>
            </div>
        )
    }
}

const TabPane = Tabs.TabPane;
class SignInCondition extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userId: props.userId,
            signInCheckedData: props.data
        }
    }

    componentWillReceiveProps(props) {
        this.state = {
            userId: props.userId,
            signInCheckedData: props.data
        }
    }

    render() {
        const tabPane = this.state.signInCheckedData.map(v => (
            <TabPane tab={v.name} key={v.id}>
                <SignInCalendar meetingId={v.id}></SignInCalendar>
            </TabPane>
        ));
        return (
            <Tabs defaultActiveKey={this.state.signInCheckedData.length === 0 ? 0 : this.state.signInCheckedData[0].id} tabPosition="left">
                {tabPane}
            </Tabs>
        );
    }
}

class SignInCalendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            meetingId: props.meetingId,
            calendarData: [],
            loading: false,
            dateCellRenderData: {},
            modalVisible: false,
            tableLoading: false,
            tableData: []
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    componentWillReceiveProps(props) {
        this.setState({
            meetingId: props.meetingId
        });
    }

    refreshData() {
        this.setState({
            loading: true
        });
        getCheckCreateDate(this.state.meetingId)
            .then(res => {
                let temp = {};
                res.data.forEach(v => {
                    temp[v.createDate] = {
                        cnt: v.cnt,
                        should: v.should,
                        type: v.type
                    }
                });
                this.setState({
                    calendarData: res.data,
                    dateCellRenderData: temp,
                    loading: false,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    dateCellRender = (val) => {
        let data = this.state.dateCellRenderData[val.format("YYYY-MM-DD")]
        return (
            <Row style={{
                height: "100%"
            }}>
                {
                    data !== undefined ?
                        (
                            <Row type="flex" align="middle" justify="center"
                                style={{
                                    height: "100%",
                                    width: "100%"
                                }}>
                                <Row>
                                    {
                                        data.type === 1 || data.type === 2 ?
                                            (
                                                <Row>
                                                    <Badge status="processing" text={"应到:" + data.should}></Badge>
                                                </Row>
                                            ) :
                                            (
                                                null
                                            )
                                    }
                                    <Row>
                                        <Badge status="success" text={"实到:" + data.cnt}></Badge>
                                    </Row>
                                </Row>
                            </Row>
                        ) :
                        (
                            null
                        )
                }
            </Row>
        );
    }

    onSelectHandle = (val) => {
        let dateArray = this.state.calendarData.map(val => val.createDate);
        let date = val.format("YYYY-MM-DD");
        if (dateArray.indexOf(date) !== -1) {
            this.setState({
                modalVisible: true,
                tableLoading: true
            });
            getCheckCondition(this.state.meetingId, date)
                .then(res => {
                    this.setState({
                        tableData: res.data[date].reverse(),
                        tableLoading: false
                    });
                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message);
                    }
                    console.info(e.config)
                });
        }
    }

    handleCancel = () => {
        this.setState({
            modalVisible: false
        });
    }

    handleSearch = (selectedKeys, confirm) => {
        confirm();
        this.setState({ searchText: selectedKeys[0] });
    }

    handleReset = (clearFilters) => {
        clearFilters();
        this.setState({ searchText: '' });
    }

    render() {
        const columns = [{
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: "10%",
            render: (text, record, index) => `${index + 1}`,
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: "45%",
            filterDropdown: ({
                setSelectedKeys, selectedKeys, confirm, clearFilters,
            }) => (
                    <div style={{ padding: 8 }}>
                        <Input
                            ref={node => { this.searchInput = node; }}
                            placeholder="搜索姓名"
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
                            style={{ width: 188, marginBottom: 8, display: 'block' }}
                        />
                        <Button
                            type="primary"
                            onClick={() => this.handleSearch(selectedKeys, confirm)}
                            icon="search"
                            size="small"
                            style={{ width: 90, marginRight: 8 }}
                        >
                            搜索
                    </Button>
                        <Button
                            onClick={() => this.handleReset(clearFilters)}
                            size="small"
                            style={{ width: 90 }}
                        >
                            重置
                    </Button>
                    </div>
                ),
            onFilter: (value, record) => record.name.includes(value),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => this.searchInput.select());
                }
            },
        }, {
            title: '签到状态',
            dataIndex: 'isAbsent',
            key: 'isAbsent',
            width: "45%",
            render: (text) => {
                if (text === 1) {
                    return (
                        <img
                            style={{
                                height: "25px"
                            }}
                            src={require("../img/attendance1.png")} />
                    );
                } else if (text === 2) {
                    return (
                        <img
                            style={{
                                height: "25px"
                            }}
                            src={require("../img/attendance2.png")} />
                    );
                } else {
                    return (
                        <img
                            style={{
                                height: "25px"
                            }}
                            src={require("../img/attendance3.png")} />
                    );
                }
            },
            filters: [
                { text: '正常', value: 1 },
                { text: '迟到', value: 2 },
                { text: '缺席', value: 3 }
            ],
            onFilter: (value, record) => record.isAbsent === value
        }];

        return (
            <Spin spinning={this.state.loading}>
                {
                    this.state.calendarData.length === 0 ?
                        (
                            <Empty />
                        ) :
                        (
                            <Calendar
                                className="myCalendar"
                                validRange={[moment(this.state.calendarData[0].createDate, 'YYYY-MM-DD'),
                                moment(this.state.calendarData[this.state.calendarData.length - 1].createDate, 'YYYY-MM-DD')]}
                                dateCellRender={(date) => this.dateCellRender(date)}
                                onSelect={(date) => this.onSelectHandle(date)}
                            />
                        )
                }
                <Modal
                    title="签到情况"
                    visible={this.state.modalVisible}
                    width={1000}
                    onCancel={() => this.handleCancel()}
                    closable
                    footer={null}
                >
                    <Table
                        dataSource={this.state.tableData}
                        columns={columns}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.tableData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            }
                        }} />
                </Modal>
            </Spin>
        );
    }
}

class attendanceForm extends Component {
    constructor(props) {
        super(props);
        let record = props.record;
        this.state = {
            groupData: props.groupOption,
            deviceData: props.deviceOption,
            modalType: props.modalType === "" ? "add" : props.modalType,
            name: record.name === undefined ? "" : record.name,
            type: record.type === undefined ? props.type : record.groupNameId === 0 ? record.type - 2 : record.type,
            groupNameId: record.groupNameId === undefined ? "" : record.groupNameId,
            blueToothIdList: record.blueToothIdList === undefined ? [] : record.blueToothIdList.split(',').map(v => parseInt(v)),
            startDate: record.startDate === undefined ? null : record.startDate,
            startTime: record.startTime === undefined ? null : record.startTime,
            needDate: record.startDate == undefined && record.startTime == undefined ? false : true,
            needTime: record.startDate == undefined && record.startTime == undefined ? false : true,
            date: record.startDate == undefined ? "" : record.startDate,
            time: record.startTime == undefined ? "" : record.startTime,
            groupOption: props.groupOption.map(v => (
                v.type == ((record.type === undefined ? props.type : record.groupNameId === 0 ? record.type - 2 : record.type) - 1) ? <Option value={v.id}>{v.name}</Option> : null
            )),
        }
        console.log(this.state.type, "签到类型")
    }

    // componentWillReceiveProps(props) {
    //     let record = props.record;
    //     console.log("componentWillReceiveProps", record)
    //     this.setState({
    //         groupData: props.groupOption,
    //         deviceData: props.deviceOption,
    //         modalType: props.modalType === "" ? "add" : props.modalType,
    //         name: record.name === undefined ? "" : record.name,
    //         type: record.type === undefined ? props.type : record.groupNameId === 0 ? record.type - 2 : record.type,
    //         groupNameId: record.groupNameId === undefined ? "" : record.groupNameId,
    //         blueToothIdList: record.blueToothIdList === undefined ? [] : record.blueToothIdList.split(',').map(v => parseInt(v)),
    //         startDate: record.startDate === undefined ? null : record.startDate,
    //         startTime: record.startTime === undefined ? null : record.startTime,
    //         // needDate: false,
    //         // needTime: false
    //     })
    // }

    handleOnChange = (type, str) => {
        if (str !== "") {
            if (type === "date") {
                this.setState({
                    needTime: true,
                    date: str
                }, () => {
                    this.props.form.validateFields(['time'], { force: true })
                })
            } else {
                this.setState({
                    needDate: true,
                    time: str
                }, () => this.props.form.validateFields(['date'], { force: true }))
            }
        } else {
            if (type === "date") {
                this.setState({
                    date: str
                });
                if (this.state.time == "") {
                    this.setState({
                        needDate: false,
                        needTime: false
                    }, () => this.props.form.validateFields(['date', 'time'], { force: true }))
                }
            } else {
                this.setState({
                    time: str
                });
                if (this.state.date == "") {
                    this.setState({
                        needDate: false,
                        needTime: false
                    }, () => this.props.form.validateFields(['date', 'time'], { force: true }))
                }
            }
        }
    }

    TypeChange = (type) => {
        console.log(type)
        let groupData = this.state.groupData
        let groupOption = groupData.map(v => (
            v.type == (type - 1) ? <Option value={v.id}>{v.name}</Option> : null
        ))
        this.setState({
            groupOption: groupOption,
            groupNameId: 0,
            type: type,
        }, () => {
            console.log("调用onSeclect 函数++++++", groupOption, this.state.groupOption)
        })

    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const groupOption = this.state.groupOption;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 },
        };


        const deviceOption = this.state.deviceData.map(v => (
            <Option value={v.id}>{v.minor}</Option>
        ))
        return (
            <Form>
                <FormItem
                    label='签到名称'
                    {...formItemLayout}>
                    {getFieldDecorator("name", {
                        initialValue: this.state.name,
                        rules: [{
                            required: true,
                            message: "请输入签到名称！"
                        }]
                    })(
                        <Input
                            size="large"
                            placeholder="签到名称"
                            allowClear
                        />
                    )}
                </FormItem>
                {
                    this.state.modalType !== "add" ?
                        (
                            <Row>
                                <FormItem
                                    label='签到类型'
                                    {...formItemLayout}>
                                    {getFieldDecorator('type', {
                                        initialValue: this.state.type,
                                        rules: [{
                                            required: true,
                                            message: '请选择签到类型！'
                                        }],
                                    })(
                                        <Select size="large" placeholder="签到类型" onSelect={(value) => { this.TypeChange(value) }}>
                                            <Option value={1}>上课签到</Option>
                                            <Option value={2}>会议签到</Option>
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem
                                    label={(
                                        <span>
                                            签到对象
                                            <Tooltip title="签到对象可在人员分组管理页面添加">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    {...formItemLayout}>
                                    {getFieldDecorator('groupNameId', {
                                        initialValue: this.state.groupNameId,
                                        rules: [{
                                            required: true,
                                            message: '请选择签到对象！'
                                        }]
                                    })(
                                        <Select size="large" placeholder="签到对象">
                                            <Option value={0}>任何人</Option>
                                            {groupOption}
                                        </Select>
                                    )}
                                </FormItem>
                            </Row>
                        ) :
                        (
                            <FormItem
                                label={(
                                    <span>
                                        签到对象
                                        <Tooltip title="签到对象可在人员分组管理页面添加">
                                            <Icon type="question-circle-o" />
                                        </Tooltip>
                                    </span>
                                )}
                                {...formItemLayout}>
                                {getFieldDecorator('groupNameId', {
                                    rules: [{
                                        required: true,
                                        message: '请选择签到对象！'
                                    }]
                                })(
                                    <Select size="large" placeholder="签到对象">
                                        <Option value={0}>任何人</Option>
                                        {groupOption}
                                    </Select>
                                )}
                            </FormItem>
                        )
                }
                <FormItem
                    label='签到设备'
                    {...formItemLayout}>
                    {getFieldDecorator('blueToothIdList', {
                        initialValue: this.state.blueToothIdList,
                        rules: [{
                            required: true,
                            message: '请选择签到设备！'
                        }],
                    })(
                        <Select mode="multiple" size="large" placeholder="签到设备">
                            {deviceOption}
                        </Select>
                    )}
                </FormItem>
                {
                    this.state.type === 2 ?
                        (
                            <FormItem
                                label={(
                                    <span>
                                        签到时间
                                        <Tooltip title="设置签到时间将在签到开始半小时前及签到开始时向签到对象推送消息">
                                            <Icon type="question-circle-o" />
                                        </Tooltip>
                                    </span>
                                )}
                                {...formItemLayout}>
                                <FormItem
                                    style={{ display: 'inline-block' }}>
                                    {getFieldDecorator("date", {
                                        initialValue: this.state.startDate === null ? null : moment(this.state.startDate, 'YYYY-MM-DD'),
                                        type: 'object',
                                        rules: [{
                                            required: this.state.needDate,
                                            message: '请选择会议日期',
                                        }]
                                    })(
                                        <DatePicker
                                            size="large"
                                            disabledDate={current => current && current < moment().endOf('day')}
                                            onChange={(date, dateString) => this.handleOnChange("date", dateString)}
                                        />
                                    )}
                                </FormItem>
                                <FormItem
                                    style={{ display: 'inline-block', marginLeft: "10px" }}>
                                    {getFieldDecorator("time", {
                                        initialValue: this.state.startTime === null ? null : moment(this.state.startTime, 'HH:mm'),
                                        type: 'object',
                                        rules: [{
                                            required: this.state.needTime,
                                            message: '请选择会议时间',
                                        }]
                                    })(
                                        <TimePicker
                                            size="large"
                                            defaultOpenValue={moment('00:00', 'HH:mm')}
                                            format='HH:mm'
                                            onChange={(time, timeString) => this.handleOnChange("time", timeString)}
                                        />
                                    )}
                                </FormItem>
                            </FormItem>
                        ) :
                        (
                            null
                        )
                }
            </Form>
        );
    }
}
const AttendanceForm = Form.create()(attendanceForm);

class SignBlueteeth extends Component {
    constructor(props) {
        super(props);
        this.state = {
            columnData: [],
            tableLoading: false,
            modalTitle: "",
            modalVisible: false,
            confirmLoading: false,
            alertVisible: false,
            msg: "",
            clickedRecord: {},
            modalType: "",
        }
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        })
        getBluetoothDeviceByDepartment(sessionStorage.getItem("userId"))
            .then(res => {
                this.setState({
                    tableLoading: false,
                    columnData: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    confirmDelete(id) {
        deleteBluetoothDevice(id)
            .then(res => {
                if (res.data === "success") {
                    this.refreshData();
                    message.success("删除设备成功！")
                } else {
                    message.error("删除设备失败！");
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    handleClickOpenModal = (type, record) => {
        if (type === "add") {
            this.setState({
                modalTitle: '新增设备',
                modalVisible: true,
                clickedRecord: {},
                modalType: "add",
                alertVisible: false
            })
        } else if (type === "update") {
            this.setState({
                modalTitle: '修改设备信息',
                modalVisible: true,
                clickedRecord: record,
                modalType: "update",
                alertVisible: false
            })
        }
    }

    handleCancel() {
        let val = this.refs.formValue;
        val.resetFields();
        this.setState({
            alertVisible: false,
            modalVisible: false
        });
    }

    handleFormSubmit() {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.formValue;
        val.validateFields((err, values) => {
            if (!err) {
                if (this.state.modalType === "add") {
                    addBluetoothDevice(values)
                        .then(res => {
                            if (res.data === "EXISTS") {
                                this.setState({
                                    alertVisible: true,
                                    msg: "设备已存在！请重新输入"
                                });
                            } else {
                                message.success("新增成功！");
                                this.refreshData();
                                this.handleCancel();
                            }
                            this.setState({
                                confirmLoading: false
                            });
                        })
                        .catch((e) => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data)
                                console.info(e.response.status)
                                console.info(e.response.headers)
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request)
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info('error', e.message);
                            }
                            console.info(e.config)
                        });
                } else if (this.state.modalType === "update") {
                    updateBluetoothDevice(this.state.clickedRecord.id, values)
                        .then(res => {
                            if (res.data === "EXISTS") {
                                this.setState({
                                    alertVisible: true,
                                    msg: "设备已存在！请重新输入"
                                });
                            } else if (res.data === "NO UPDATE") {
                                this.setState({
                                    alertVisible: true,
                                    msg: "请修改设备号后再提交！"
                                });
                            } else {
                                message.success("修改成功！");
                                this.refreshData();
                                this.handleCancel();
                            }
                            this.setState({
                                confirmLoading: false
                            });
                        })
                        .catch((e) => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data)
                                console.info(e.response.status)
                                console.info(e.response.headers)
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request)
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info('error', e.message);
                            }
                            console.info(e.config)
                        });
                }
            }
        })
    }

    handleClose() {
        this.setState({
            alertVisible: false,
            msg: ''
        });
    }

    render() {
        const columns = [{
            title: "序号",
            dataIndex: "id",
            key: "id",
            width: "20%",
            render: (text, record, index) => `${index + 1}`,
        }, {
            title: "学院号",
            dataIndex: "major",
            key: "major",
            width: "20%"
        }, {
            title: "设备号",
            dataIndex: "minor",
            key: "minor",
            width: "20%"
        }, {
            title: "使用者",
            dataIndex: "realName",
            key: "realName",
            width: "20%"
        }, {
            title: "操作",
            dataIndex: "action",
            width: "20%",
            render: (text, record) => (
                <span>
                    <a onClick={() => this.handleClickOpenModal("update", record)}>修改</a>
                    <Divider type="vertical" />
                    <Popconfirm title="确定删除？" onConfirm={() => { this.confirmDelete(record.id) }} okText="确定" cancelText="取消">
                        <a>删除</a>
                    </Popconfirm>
                </span>
            ),
        }]
        return (
            <div
                id="right"
                style={{
                    padding: 24,
                    background: "#fff",
                    height: "auto"
                }}
            >
                <div style={{ marginBottom: 16 }}>
                    <Button type="primary" onClick={() => this.handleClickOpenModal("add")} size="large">
                        <Icon type="plus" />新增设备
                    </Button>
                    <Modal
                        title={this.state.modalTitle}
                        visible={this.state.modalVisible}
                        width={1000}
                        onCancel={() => this.handleCancel()}
                        closable
                        footer={[
                            <Button key="submit" type="primary" size="large"
                                loading={this.state.confirmLoading}
                                onClick={() => this.handleFormSubmit()}>提交</Button>
                        ]}
                    >
                        <BluetoothDeviceForm ref="formValue" record={this.state.clickedRecord} />
                        {
                            this.state.alertVisible ?
                                (
                                    <Row>
                                        <Col offset={5} span={14}>
                                            <Alert message={this.state.msg} type="error" closable afterClose={() => this.handleClose()} />
                                        </Col>
                                    </Row>
                                ) : null
                        }
                    </Modal>
                </div>
                <Table
                    dataSource={this.state.columnData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        defaultPageSize: 10, //默认显示几条一页
                        pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        }
                    }} />
            </div>
        );
    }
}

class bluetoothDeviceForm extends Component {
    constructor(props) {
        super(props);
        let record = this.props.record;
        this.state = {
            major: record.major === undefined ? "" : record.major,
            minor: record.minor === undefined ? "" : record.minor,
            username: record.username === undefined ? "" : record.username,
            allUser: []
        }
    }

    componentDidMount() {
        allUserApi(sessionStorage.getItem("identityId"), sessionStorage.getItem("departmentId"))
            .then(res => {
                this.setState({
                    allUser: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }

    componentWillReceiveProps(props) {
        let record = props.record;
        console.log(record)
        this.setState({
            major: record.major === undefined ? "" : record.major,
            minor: record.minor === undefined ? "" : record.minor,
            username: record.username === undefined ? "" : record.username,
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 },
        };
        const userOption = this.state.allUser.map(v => {
            return (
                <Option value={v.username}>{v.realName}</Option>
            );
        });
        return (
            <Form>
                <FormItem
                    label='学院号'
                    {...formItemLayout}>
                    {getFieldDecorator("major", {
                        initialValue: this.state.major,
                        rules: [{
                            required: true,
                            transform: val => parseInt(val),
                            type: "integer",
                            min: 1,
                            max: 99,
                            message: "请输入1~99的数字!"
                        }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont type="icon-mingcheng" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="学院号(1~99)"
                            allowClear
                        />
                    )}
                </FormItem>
                <FormItem
                    label='设备号'
                    {...formItemLayout}>
                    {getFieldDecorator("minor", {
                        initialValue: this.state.minor,
                        rules: [{
                            required: true,
                            transform: val => parseInt(val),
                            type: "integer",
                            min: 10000,
                            max: 99999,
                            message: "请输入10000~99999的数字!"
                        }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont type="icon-mingcheng" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="设备号(10000~99999)"
                            allowClear
                        />
                    )}
                </FormItem>
                {
                    this.state.username === "" ?
                        (
                            <FormItem
                                label='使用者'
                                {...formItemLayout}>
                                {getFieldDecorator('username', {
                                    rules: [{
                                        required: true,
                                        message: '请选择使用者！'
                                    }]
                                })(
                                    <Select
                                        size="large"
                                        placeholder="使用者"
                                        showSearch="true"
                                        optionFilterProp="children"
                                    // filterOption={(input, option) =>{
                                    //     console.log(option, "++++++++++++++")
                                    //     return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    // }
                                    >
                                        {userOption}
                                    </Select>
                                )}
                            </FormItem>
                        ) :
                        (
                            null
                        )
                }

            </Form>
        );
    }
}
const BluetoothDeviceForm = Form.create()(bluetoothDeviceForm);


export default SchoolAttendance;
export { Attendance, OriginalList, SignBlueteeth };